<template>
  <div class="ai-chat-container">
    <!-- 顶部导航栏 -->
    <div class="chat-header">
      <div class="header-content">
        <button class="back-btn" @click="goBack">
          <span class="back-icon">‹</span>
        </button>
        <div class="header-title">
          <span class="title-text">AI法律助手</span>
          <span class="subtitle-text">为您分析法律问题</span>
        </div>
        <div class="header-actions">
          <button class="clear-btn" @click="clearChat">
            <span class="clear-icon">🗑️</span>
          </button>
        </div>
      </div>
    </div>

    <!-- 聊天消息区域 -->
    <div class="chat-messages" ref="messagesContainer">
      <div class="welcome-message" v-if="messages.length === 0">
        <div class="welcome-avatar">🤖</div>
        <div class="welcome-content">
          <div class="welcome-title">您好！我是AI法律助手</div>
          <div class="welcome-desc">请详细描述您遇到的法律问题，我会帮您分析并提供专业建议</div>
          <div class="welcome-tips">
            <div class="tip-item">💡 描述越详细，分析越准确</div>
            <div class="tip-item">⚖️ 涵盖民事、刑事、行政等各领域</div>
            <div class="tip-item">🎯 提供针对性解决方案</div>
          </div>
        </div>
      </div>

      <!-- 消息列表 -->
      <div 
        v-for="(message, index) in messages" 
        :key="index"
        class="message-item"
        :class="{ 'user-message': message.type === 'user', 'ai-message': message.type === 'ai' }"
      >
        <div class="message-avatar">
          <span v-if="message.type === 'user'">👤</span>
          <span v-else>🤖</span>
        </div>
        <div class="message-content">
          <div class="message-text" v-html="formatMessage(message.content)"></div>
          <div class="message-time">{{ formatTime(message.timestamp) }}</div>
        </div>
      </div>

      <!-- AI思考中的状态 -->
      <div v-if="isAiThinking" class="message-item ai-message">
        <div class="message-avatar">
          <span>🤖</span>
        </div>
        <div class="message-content">
          <div class="thinking-indicator">
            <span class="thinking-dots">
              <span></span>
              <span></span>
              <span></span>
            </span>
            <span class="thinking-text">AI正在分析您的问题...</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 输入区域 -->
    <div class="chat-input-area">
      <div class="input-container">
        <div class="input-wrapper">
          <textarea 
            v-model="inputText"
            class="chat-input"
            placeholder="请详细描述您的法律问题..."
            rows="1"
            @input="adjustTextareaHeight"
            @keyup.enter="handleSend"
            ref="chatInput"
            :disabled="isAiThinking"
          ></textarea>
          <button 
            class="send-btn" 
            @click="handleSend"
            :disabled="!inputText.trim() || isAiThinking"
            :class="{ 'sending': isAiThinking }"
          >
            <span v-if="!isAiThinking" class="send-icon">➤</span>
            <span v-else class="sending-icon">⏳</span>
          </button>
        </div>
        <div class="input-actions">
          <button class="voice-input-btn" @click="startVoiceInput" :disabled="isAiThinking">
            <span class="voice-icon">🎤</span>
            <span class="voice-text">语音输入</span>
          </button>
          <button 
            class="finish-btn"
            @click="finishConsultation"
            :disabled="messages.length === 0"
            v-if="messages.length > 0"
          >
            <span class="finish-icon">✅</span>
            <span class="finish-text">结束咨询</span>
          </button>
        </div>
      </div>
    </div>

    <!-- 结束咨询确认弹窗 -->
    <div v-if="showFinishModal" class="modal-overlay" @click="closeFinishModal">
      <div class="finish-modal" @click.stop>
        <div class="modal-header">
          <div class="modal-title">确认结束咨询</div>
          <button class="modal-close" @click="closeFinishModal">×</button>
        </div>
        <div class="modal-content">
          <div class="modal-text">
            AI已为您分析了法律问题，接下来将为您生成详细的解决方案评估报告。
          </div>
          <div class="modal-benefits">
            <div class="benefit-item">📋 个性化解决方案</div>
            <div class="benefit-item">⚖️ 法律风险评估</div>
            <div class="benefit-item">💰 费用预估</div>
            <div class="benefit-item">📅 时间规划</div>
          </div>
        </div>
        <div class="modal-actions">
          <button class="modal-btn cancel-btn" @click="closeFinishModal">
            继续咨询
          </button>
          <button class="modal-btn confirm-btn" @click="confirmFinish">
            生成评估报告
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 为普通 Vue 项目创建 uni 对象模拟
if (typeof uni === 'undefined') {
  window.uni = {
    navigateTo(options) {
      if (options.url) {
        // 使用 Vue Router 风格的导航
        const hash = options.url.replace(/^\/pages/, '#/pages')
        
        try {
          window.location.hash = hash
          
          setTimeout(() => {
            if (options.success) {
              options.success({ errMsg: 'navigateTo:ok' })
            }
          }, 100)
        } catch (error) {
          if (options.fail) {
            options.fail({ errMsg: 'navigateTo:fail' })
          }
        }
      }
    },
    navigateBack(options = {}) {
      try {
        window.history.back()
        setTimeout(() => {
          if (options.success) {
            options.success({ errMsg: 'navigateBack:ok' })
          }
        }, 100)
      } catch (error) {
        if (options.fail) {
          options.fail({ errMsg: 'navigateBack:fail' })
        }
      }
    },
    showToast(options) {
      // 创建自定义toast而不是用alert
      const toast = document.createElement('div')
      toast.textContent = options.title || '提示'
      toast.style.cssText = `
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(0,0,0,0.8);
        color: white;
        padding: 10px 20px;
        border-radius: 5px;
        z-index: 9999;
        font-size: 14px;
      `
      document.body.appendChild(toast)
      setTimeout(() => {
        document.body.removeChild(toast)
      }, options.duration || 2000)
    },
    showLoading(options) {
      // Loading显示功能
      console.log('Loading:', options?.title || 'Loading...')
    },
    hideLoading() {
      // Loading隐藏功能
      console.log('Hide loading')
    },
    showModal(options) {
      const result = confirm(options.content || '确认操作？')
      if (options.success) {
        options.success({
          confirm: result,
          cancel: !result
        })
      }
    }
  }
}

export default {
  name: 'AiChat',
  data() {
    return {
      inputText: '',
      messages: [],
      isAiThinking: false,
      showFinishModal: false,
      initialProblem: '', // 从首页传来的初始问题
      // 预设的AI回复模板
      aiResponses: [
        {
          trigger: ['工资', '薪资', '欠薪', '拖欠'],
          response: `根据您描述的薪资问题，我为您分析如下：

**法律依据：**
• 《劳动法》规定用人单位应当按时足额支付劳动者工资
• 《劳动合同法》对工资支付有明确规定

**建议解决方案：**
1. **协商解决** - 首先与用人单位友好协商
2. **劳动仲裁** - 向劳动争议仲裁委员会申请仲裁
3. **诉讼程序** - 如仲裁不成功可向法院起诉

**所需材料：**
• 劳动合同或工作证明
• 工资条或银行流水
• 考勤记录

**时间周期：** 协商1-2周，仲裁2-3个月，诉讼3-6个月

您希望我为您生成详细的解决方案评估报告吗？`
        },
        {
          trigger: ['合同', '违约', '协议'],
          response: `关于您的合同问题，我为您提供以下分析：

**合同效力分析：**
• 需要检查合同是否符合法律规定
• 确认各方是否具有签约能力
• 分析合同条款是否公平合理

**违约责任：**
• 确定违约方和违约行为
• 计算违约损失
• 确定违约责任承担方式

**解决途径：**
1. **协商调解** - 通过友好协商解决争议
2. **仲裁程序** - 如有仲裁条款可申请仲裁
3. **民事诉讼** - 向法院提起合同纠纷诉讼

**预估费用：** 诉讼费根据争议金额确定，律师费协商确定

让我为您制定详细的处理方案！`
        },
        {
          trigger: ['房产', '买房', '租房', '房屋'],
          response: `针对您的房产相关问题，我的专业建议是：

**房产交易注意事项：**
• 核实房屋产权是否清晰
• 检查是否存在抵押或查封
• 确认税费承担和过户流程

**租赁合同要点：**
• 明确租期、租金及支付方式
• 约定房屋使用和维修责任
• 规定违约责任和争议解决

**常见纠纷处理：**
1. **房屋质量问题** - 可要求修复或赔偿
2. **中介服务纠纷** - 向住建部门投诉
3. **物业管理纠纷** - 通过业主委员会协调

**法律保障：** 《物权法》《合同法》等提供完整保护

我可以为您制定针对性的房产法律解决方案。`
        }
      ]
    }
  },
  mounted() {
    // 获取从首页传来的问题描述
    this.loadInitialProblem()
    // 如果有初始问题，自动发送
    if (this.initialProblem) {
      this.inputText = this.initialProblem
      setTimeout(() => {
        this.handleSend()
      }, 1000)
    }
  },
  methods: {
    loadInitialProblem() {
      try {
        this.initialProblem = localStorage.getItem('problemText') || ''
      } catch (e) {
        console.error('Failed to load initial problem:', e)
      }
    },
    
    goBack() {
      uni.navigateBack({
        success: () => {
          console.log('返回成功')
        },
        fail: () => {
          // 如果返回失败，跳转到首页
          uni.navigateTo({
            url: '/pages/index/index'
          })
        }
      })
    },

    clearChat() {
      uni.showModal({
        title: '确认清空',
        content: '确定要清空所有聊天记录吗？',
        success: (res) => {
          if (res.confirm) {
            this.messages = []
            this.inputText = ''
            uni.showToast({
              title: '已清空聊天记录',
              icon: 'success'
            })
          }
        }
      })
    },

    handleSend() {
      if (!this.inputText.trim() || this.isAiThinking) {
        return
      }

      const userMessage = {
        type: 'user',
        content: this.inputText.trim(),
        timestamp: Date.now()
      }

      this.messages.push(userMessage)
      const userInput = this.inputText.trim()
      this.inputText = ''
      
      // 滚动到底部
      this.$nextTick(() => {
        this.scrollToBottom()
      })

      // 显示AI思考状态
      this.isAiThinking = true

      // 模拟AI回复
      setTimeout(() => {
        this.generateAiResponse(userInput)
        this.isAiThinking = false
        this.$nextTick(() => {
          this.scrollToBottom()
        })
      }, 2000 + Math.random() * 2000) // 2-4秒随机延迟
    },

    generateAiResponse(userInput) {
      let response = this.getMatchedResponse(userInput)
      
      if (!response) {
        response = `感谢您的咨询。根据您描述的情况，我建议：

**初步分析：**
这是一个需要具体分析的法律问题，涉及多个法律层面。

**建议步骤：**
1. **收集证据** - 整理相关的文件和证明材料
2. **法律咨询** - 寻求专业律师的详细建议  
3. **选择途径** - 根据具体情况选择最适合的解决方案

**注意事项：**
• 注意相关的诉讼时效
• 保留好重要的证据材料
• 及时采取法律行动

**下一步：**
我建议为您生成详细的解决方案评估报告，包含具体的处理流程、预期费用和时间安排。

您希望继续深入分析吗？`
      }

      const aiMessage = {
        type: 'ai',
        content: response,
        timestamp: Date.now()
      }

      this.messages.push(aiMessage)
    },

    getMatchedResponse(input) {
      for (const template of this.aiResponses) {
        if (template.trigger.some(keyword => input.includes(keyword))) {
          return template.response
        }
      }
      return null
    },

    formatMessage(content) {
      // 将换行符转换为HTML换行
      return content.replace(/\n/g, '<br>')
        .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>') // 粗体
        .replace(/•\s/g, '• ') // 列表项
    },

    formatTime(timestamp) {
      const date = new Date(timestamp)
      const hours = date.getHours().toString().padStart(2, '0')
      const minutes = date.getMinutes().toString().padStart(2, '0')
      return `${hours}:${minutes}`
    },

    scrollToBottom() {
      const container = this.$refs.messagesContainer
      if (container) {
        container.scrollTop = container.scrollHeight
      }
    },

    adjustTextareaHeight() {
      const textarea = this.$refs.chatInput
      if (textarea) {
        textarea.style.height = 'auto'
        textarea.style.height = Math.min(textarea.scrollHeight, 120) + 'px'
      }
    },

    startVoiceInput() {
      // 检查浏览器是否支持语音识别
      if (!('webkitSpeechRecognition' in window) && !('SpeechRecognition' in window)) {
        uni.showToast({
          title: '您的浏览器不支持语音识别功能',
          icon: 'none'
        })
        return
      }

      const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition
      const recognition = new SpeechRecognition()
      
      recognition.lang = 'zh-CN'
      recognition.continuous = false
      recognition.interimResults = false
      recognition.maxAlternatives = 1

      uni.showToast({
        title: '请说话...',
        icon: 'none',
        duration: 3000
      })

      recognition.onresult = (event) => {
        const transcript = event.results[0][0].transcript
        this.inputText = transcript
        this.adjustTextareaHeight()
        
        uni.showToast({
          title: '识别成功',
          icon: 'success'
        })
      }

      recognition.onerror = (event) => {
        let errorMessage = '语音识别失败'
        
        switch (event.error) {
          case 'no-speech':
            errorMessage = '未检测到语音'
            break
          case 'audio-capture':
            errorMessage = '无法获取麦克风'
            break
          case 'not-allowed':
            errorMessage = '请允许麦克风权限'
            break
          case 'network':
            errorMessage = '网络错误'
            break
        }
        
        uni.showToast({
          title: errorMessage,
          icon: 'none'
        })
      }

      recognition.start()
    },

    finishConsultation() {
      this.showFinishModal = true
    },

    closeFinishModal() {
      this.showFinishModal = false
    },

    confirmFinish() {
      // 存储聊天记录到本地存储供智能评估页面使用
      try {
        const chatSummary = this.generateChatSummary()
        localStorage.setItem('aiChatSummary', JSON.stringify(chatSummary))
        localStorage.setItem('chatTimestamp', Date.now().toString())
      } catch (e) {
        console.error('Failed to save chat summary:', e)
      }

      this.showFinishModal = false
      
      // 跳转到智能评估页面
      uni.showLoading({
        title: '生成评估报告中...'
      })

      setTimeout(() => {
        uni.hideLoading()
        const targetUrl = '/pages/smart-evaluation'
        
        try {
          const fullUrl = window.location.origin + targetUrl
          window.location.href = fullUrl
        } catch (error) {
          uni.navigateTo({
            url: targetUrl,
            fail: () => {
              uni.showToast({
                title: '跳转失败，请重试',
                icon: 'none'
              })
            }
          })
        }
      }, 1500)
    },

    generateChatSummary() {
      // 提取用户的问题和AI的建议，生成摘要
      const userMessages = this.messages.filter(msg => msg.type === 'user')
      const aiMessages = this.messages.filter(msg => msg.type === 'ai')
      
      return {
        problemDescription: userMessages.map(msg => msg.content).join(' '),
        aiAnalysis: aiMessages.map(msg => msg.content).join('\n\n'),
        messageCount: this.messages.length,
        consultationDuration: this.messages.length > 0 ? 
          (this.messages[this.messages.length - 1].timestamp - this.messages[0].timestamp) : 0,
        timestamp: Date.now()
      }
    }
  }
}
</script>

<style scoped>
.ai-chat-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

/* 顶部导航栏 */
.chat-header {
  background: linear-gradient(135deg, #0A2463 0%, #185BBB 100%);
  color: white;
  padding: 12px 16px;
  box-shadow: 0 2px 10px rgba(10, 36, 99, 0.2);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
}

.back-btn, .clear-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  color: white;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.back-btn:hover, .clear-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.back-icon {
  font-size: 24px;
  font-weight: bold;
}

.clear-icon {
  font-size: 16px;
}

.header-title {
  flex: 1;
  text-align: center;
  margin: 0 16px;
}

.title-text {
  display: block;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 2px;
}

.subtitle-text {
  display: block;
  font-size: 12px;
  opacity: 0.8;
  font-weight: 400;
}

/* 聊天消息区域 */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px 16px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

/* 欢迎消息 */
.welcome-message {
  display: flex;
  align-items: flex-start;
  margin-bottom: 24px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(10, 36, 99, 0.1);
}

.welcome-avatar {
  font-size: 40px;
  margin-right: 16px;
  flex-shrink: 0;
}

.welcome-content {
  flex: 1;
}

.welcome-title {
  font-size: 20px;
  font-weight: 600;
  color: #0A2463;
  margin-bottom: 8px;
}

.welcome-desc {
  font-size: 16px;
  color: #666;
  line-height: 1.5;
  margin-bottom: 16px;
}

.welcome-tips {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tip-item {
  font-size: 14px;
  color: #888;
  padding: 8px 12px;
  background: rgba(10, 36, 99, 0.05);
  border-radius: 8px;
  border-left: 3px solid #185BBB;
}

/* 消息项 */
.message-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16px;
  animation: fadeInUp 0.3s ease-out;
}

.user-message {
  flex-direction: row-reverse;
}

.user-message .message-content {
  text-align: right;
  margin-right: 12px;
  margin-left: 0;
}

.ai-message .message-content {
  margin-left: 12px;
  margin-right: 0;
}

.message-avatar {
  font-size: 32px;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.message-content {
  max-width: 70%;
  min-width: 100px;
}

.message-text {
  background: white;
  padding: 12px 16px;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  font-size: 15px;
  line-height: 1.5;
  color: #333;
  word-wrap: break-word;
}

.user-message .message-text {
  background: linear-gradient(135deg, #185BBB 0%, #3474EB 100%);
  color: white;
}

.message-time {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
  padding: 0 4px;
}

/* AI思考状态 */
.thinking-indicator {
  background: white;
  padding: 12px 16px;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 8px;
}

.thinking-dots {
  display: flex;
  gap: 4px;
}

.thinking-dots span {
  width: 6px;
  height: 6px;
  background: #185BBB;
  border-radius: 50%;
  animation: thinking 1.4s ease-in-out infinite both;
}

.thinking-dots span:nth-child(1) { animation-delay: -0.32s; }
.thinking-dots span:nth-child(2) { animation-delay: -0.16s; }

.thinking-text {
  font-size: 14px;
  color: #666;
}

@keyframes thinking {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

/* 输入区域 */
.chat-input-area {
  background: rgba(255, 255, 255, 0.95);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding: 16px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
}

.input-container {
  max-width: 1200px;
  margin: 0 auto;
}

.input-wrapper {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 12px;
}

.chat-input {
  flex: 1;
  background: white;
  border: 2px solid rgba(10, 36, 99, 0.1);
  border-radius: 16px;
  padding: 12px 16px;
  font-size: 16px;
  line-height: 1.5;
  resize: none;
  outline: none;
  transition: all 0.3s ease;
  min-height: 48px;
  max-height: 120px;
  font-family: inherit;
}

.chat-input:focus {
  border-color: #185BBB;
  box-shadow: 0 0 0 3px rgba(24, 91, 187, 0.1);
}

.chat-input:disabled {
  background: #f5f5f5;
  color: #999;
}

.send-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #185BBB 0%, #3474EB 100%);
  border: none;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
  font-size: 20px;
}

.send-btn:hover:not(:disabled) {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(24, 91, 187, 0.4);
}

.send-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
  transform: none;
}

.send-btn.sending {
  animation: pulse 1.5s infinite;
}

.input-actions {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
}

.voice-input-btn, .finish-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: rgba(10, 36, 99, 0.1);
  border: 1px solid rgba(10, 36, 99, 0.2);
  border-radius: 12px;
  color: #185BBB;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
  font-weight: 500;
}

.voice-input-btn:hover, .finish-btn:hover {
  background: rgba(10, 36, 99, 0.2);
  transform: translateY(-1px);
}

.finish-btn {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  border: none;
  color: white;
}

.finish-btn:hover {
  background: linear-gradient(135deg, #218838 0%, #1abc9c 100%);
}

.finish-btn:disabled {
  background: #ccc;
  color: #999;
  cursor: not-allowed;
}

/* 结束咨询弹窗 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.finish-modal {
  background: white;
  border-radius: 16px;
  max-width: 500px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  animation: modalSlideIn 0.3s ease-out;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 0;
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
}

.modal-title {
  font-size: 20px;
  font-weight: 600;
  color: #0A2463;
}

.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  color: #999;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.modal-close:hover {
  background: #f0f0f0;
  color: #333;
}

.modal-content {
  padding: 0 24px 20px;
}

.modal-text {
  font-size: 16px;
  line-height: 1.5;
  color: #666;
  margin-bottom: 20px;
}

.modal-benefits {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.benefit-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #555;
  padding: 12px;
  background: rgba(24, 91, 187, 0.05);
  border-radius: 8px;
}

.modal-actions {
  display: flex;
  gap: 12px;
  padding: 0 24px 24px;
}

.modal-btn {
  flex: 1;
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
}

.cancel-btn {
  background: #f8f9fa;
  color: #666;
  border: 1px solid #ddd;
}

.cancel-btn:hover {
  background: #e9ecef;
}

.confirm-btn {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  color: white;
}

.confirm-btn:hover {
  background: linear-gradient(135deg, #218838 0%, #1abc9c 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

/* 动画效果 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .chat-header {
    padding: 10px 12px;
  }

  .title-text {
    font-size: 16px;
  }

  .subtitle-text {
    font-size: 11px;
  }

  .chat-messages {
    padding: 16px 12px;
  }

  .welcome-message {
    padding: 20px 16px;
  }

  .welcome-title {
    font-size: 18px;
  }

  .welcome-desc {
    font-size: 14px;
  }

  .message-content {
    max-width: 85%;
  }

  .chat-input-area {
    padding: 12px;
  }

  .input-actions {
    flex-direction: column;
    gap: 8px;
  }

  .voice-input-btn, .finish-btn {
    width: 100%;
    justify-content: center;
  }

  .modal-benefits {
    grid-template-columns: 1fr;
  }

  .modal-actions {
    flex-direction: column;
  }
}

/* 滚动条样式 */
.chat-messages::-webkit-scrollbar {
  width: 6px;
}

.chat-messages::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
}

.chat-messages::-webkit-scrollbar-thumb {
  background: rgba(24, 91, 187, 0.3);
  border-radius: 3px;
}

.chat-messages::-webkit-scrollbar-thumb:hover {
  background: rgba(24, 91, 187, 0.5);
}
</style>
